<template>
  <MainLayout>
    <div class="cart-content">
      <h2>购物车</h2>
      
      <el-table :data="cartItems" style="width: 100%" :empty-text="'购物车为空，快去选购吧！'">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="image" label="商品" width="100">
            <template #default="scope">
              <el-image :src="scope.row.image" style="width: 80px; height: 80px" fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="price" label="单价" width="100">
            <template #default="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="150">
            <template #default="scope">
              <el-input-number 
                v-model="scope.row.quantity" 
                :min="1" 
                :max="99" 
                size="small"
                @change="updateCart"
              />
            </template>
          </el-table-column>
          <el-table-column label="小计" width="100">
            <template #default="scope">
              ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="danger" size="small" @click="removeItem(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="cart-footer">
        <div class="total">合计：¥{{ totalPrice.toFixed(2) }}</div>
        <el-button type="primary" size="large" @click="checkout">结算</el-button>
      </div>
    </div>
  </MainLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import MainLayout from '../layouts/MainLayout.vue'

const router = useRouter()
const cartItems = ref([])

onMounted(() => {
  // 从localStorage加载购物车数据
  const savedCart = localStorage.getItem('cart')
  if (savedCart) {
    cartItems.value = JSON.parse(savedCart)
  }
})

const totalPrice = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

const updateCart = () => {
  localStorage.setItem('cart', JSON.stringify(cartItems.value))
}

const removeItem = (index) => {
  cartItems.value.splice(index, 1)
  localStorage.setItem('cart', JSON.stringify(cartItems.value))
  ElMessage.success('已删除')
}

const checkout = () => {
  if (cartItems.value.length === 0) {
    ElMessage.warning('购物车为空')
    return
  }
  router.push('/checkout')
}
</script>

<style scoped>
.cart-content {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
}

.total {
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}
</style>

